<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:jax="http://java.sun.com/jsf/composite/jax"
   template="/WEB-INF/templates/default.xhtml">
   
   <ui:define name="content">

      <jax:groceryList model="#{groceryList}" action="#{groceryListManager.markRetrieved(_item.id)}">
         <f:facet name="heading">Grocery List</f:facet>
      </jax:groceryList>
	  
      <h:form rendered="#{not empty groceryList}">
         <h:commandButton action="#{groceryListManager.reset}" value="Reset"/>
      </h:form>

      <h2>Add Item</h2>
      <h:form id="addForm">
         <fieldset>
            <jax:inputField id="quantity">
               <h:inputText id="input" value="#{newItem.quantity}"/>
            </jax:inputField>
            <jax:inputField id="name">
               <h:inputText id="input" value="#{newItem.name}"/>
            </jax:inputField>
            <jax:inputField id="section" required="false">
               <h:inputText id="input" value="#{newItem.section}"/>
            </jax:inputField>
         </fieldset>
         <h:commandButton id="add" action="#{groceryListManager.add(newItem)}" value="Add"/>
      </h:form>
   </ui:define>

</ui:composition>
